<template>

	<view class="home">
		<img class="Mybgs" src="../static/you-magic/images/1.png" mode="" />
		<view class="handleBox">
			<view class="sameBox" @click="rules=true,checked=true">
				活动规则
			</view>
			<view @click="record" class="sameBox">
				中奖记录
			</view>

		</view>
		<view class="logos">
			<img src="../static/you-magic/images/27.png" />
			<view class="swiper">
				<view class="sweiperitem">
					<u-notice-bar font-size="20" padding="0" bg-color="none" color="#FAEBCC" :volume-icon="false"
						mode="vertical" :is-circular="false" :list="list"></u-notice-bar>

				</view>
				<image class="line" src="../static/you-magic/images/q4.png" mode=""></image>
				<image class="zujin" src="../static/you-magic/images/zujin.png" mode=""></image>
				<img class="jiantou" src="../static/you-magic/images/jiantou.png" />

			</view>
		</view>

		<view class="run">

			<!-- <view v-if="showCow" class="cow"></view>
			<image v-else class="niu" src="../static/you-magic/images/q2.png" mode=""></image> -->

			<view v-if="!showCow" @click="handleCC" class="handle">
				<image src="../static/you-magic/images/q3.png" mode=""></image>
			</view>
			
			<view  v-else  class=" addHandle">
				<image src="../static/you-magic/images/q3.png" mode=""></image>
			</view>
		</view>


		<view class="read">
			<u-checkbox size="26" label-size="20rpx" active-color="#FEDB84" shape="circle" v-model="checked">
			</u-checkbox><text @click="rules=true,checked=true">我已认真阅读并同意《圣牧有机品牌2025年新春抽奖活动规则》</text>
		</view>

		<!-- pagetwo -->



		<view v-if="pageOne" class="add1">
			<u-popup v-model="pageOne" mode="center">
				<view>
					<view class="mypageone">
						<image @click="pageOne=false;showCow=false" class="close1"
							src="../static/you-magic/images/close.png" mode=""></image>
						<image class="beisao" src="../static/you-magic/images/over.png" mode=""></image>
					</view>
				</view>
			</u-popup>
		</view>




		<u-mask :show="pageTwo">
			<view v-if="pageTwo" class="pagetwo">

				<view class="bgs">
					<image @click="pageTwo=false;showCow=false" class="close" src="../static/you-magic/images/close.png"
						mode=""></image>
					<!-- 一等奖开始 -->
					<view v-if="prizeLevel==1" class="ydj">
						<img src="../static/you-magic/images/j1.png" alt="">

						<onepage :id="id" />

					</view>
					<!-- 一等奖结束 -->
					<!-- 二等奖开始 -->
					<view v-else-if="prizeLevel==2" class="ydj edj">
						<img src="../static/you-magic/images/j2.png" alt="">
						<twopage :copyCode="copyCode" :id="id" :link="link" />

					</view>

					<!-- 二等奖结束 -->

					<!-- 三等奖开始 -->
					<view v-else class="ydj edj sdj">
						<img src="../static/you-magic/images/j3.png" alt="">{{copyCode}}
						<threepage :copyCode="copyCode" :id="id" :link="link" />

					</view>

					<!-- 三等奖结束 -->
				</view>
			</view>
		</u-mask>



		<!-- 活动规则 -->

		<view v-if="rules" class="add">
			<u-popup :closeable="true" mode="center" border-radius="30" v-model="rules" width="688rpx">
				<view class="tits">
					圣牧有机品牌抽奖活动规则
				</view>

				<view class="rulesMask">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="words">
							
							
							一、活动内容
							<br />1、活动主办方:内蒙古蒙牛圣牧高科乳品有限公司。
							<br />2、活动时间:2024年12月1日0时整至2025年6月1日24时。
							<br />3、活动区域:中国大陆境内(不含香港、澳门及台湾地区)
							<br />4、具体活动事项:此次活动为圣牧“CNY金奖品质金奖有机”主题。凡通过正常购买途径获得外箱印有“箱内有奖卡，扫码抢黄金”标识的圣牧牛奶产品，箱内均有箱卡，通过刮卡扫码即可有机会抽取以下奖品之一，本活动综合中奖率为100%，所述中奖率均以四舍五入计算。
							<br />5、活动参与条件:
							<br />(1)每提牛奶产品中最多可能含有1张箱卡，每张箱卡只有1次抽奖机会，重复抽奖无效。
							<br />(2)每个微信账户(每个账户视为一个单独主体)每日最多可参与6次抽奖，如超过限制则无法继续抽奖。
							<br />6、活动参与方式:
							<br />(1)在活动期间购买圣牧有机牛奶产品，打开牛奶箱后如果得到“金奖品质，金奖有机”奖卡，该奖卡可用于抽奖。
							<br />(2)得到奖卡后，刮开奖卡背面涂层并使用微信手机客户端扫码参与抽奖。
							<br />(3)阅读并同意活动规则后，即可得知奖品名称，按提示操作即可兑奖。
							
							<br /><br />二、奖项设置
							<br />1、一等奖:价值1888元的足金金币（具体价值随市场金价变动），总计66份，中奖率约0.002%
							<br />2、二等奖:价值19.9元有机小米，总计36888份，中奖率约1.230%
							<br />3、三等奖:圣牧小程序商城惊喜礼券，总计约2963046份，中奖率约98.768%;优惠券可用于购买圣牧有机微信小程序内部分参与活动的有机商品，不可叠加其他优惠活动，使用有效期限截止到2025年6月1日24时。
							<br />
							三、奖项规则
							<br />1、以上所有奖项为权益型奖项，不兑换现金，不设找零，不得转让。
							<br />2、本活动刮开图层即认定为中奖，每张中奖卡片只有一次兑换机会，兑换完成后，兑换码即失效。
							<br />3、兑奖时间于2024年12月1日0时整开始，2025年6月1日24时整截止，期间如未兑换即认定为放弃中奖资格，相应奖项权益作废。
							<br />4、本活动中，卡片综合中奖率100%，抽奖者中奖奖品以卡片内容为主。
							<br />5、此次奖品仅限中奖者参与本活动的微信账号领取，转发或由其他账号领取无效。
							<br />6、如获得实物奖品，请根据页面内容填写相关信息，以便我们将奖品邮寄到您，特等奖填写完信息后，我们将在1月1日起陆续发货；二等奖我们将于填写完信息后的7个工作日内，将奖品以快递形式免费(新疆、西藏等偏远地区需要额外加收运费，详情见商品支付页面提示)邮寄至您填写的信息地址，请耐心等待。
							
							<br />四、兑换流程
							<br />1、刮卡后，使用微信手机客户端扫描二维码。
							<br />2、根据页面提示进行操作并领奖。
							<br />3、二等奖进入兑奖页面后，按照提示复制页面内兑换码，复制完成后长按添加企业微信二维码，添加完成后在对话框内粘贴兑换码即可兑换。
							<br />4、如未成功兑换，可搜索【圣牧有机官方商城】小程序咨询客服，进行人工核对。
							<br />5、中奖者务必在兑换相应奖项时如实填写相关信息，否则可能影响奖项兑换。
							
							<br />五、活动咨询与售后
							<br />活动详情及售后咨询服务热线:中奖者可微信自行搜索圣牧有机官方商城小程序(店铺名称为:圣牧有机官方商城)在线客服联系处理(周一至周五9点-17点，法定节假日除外)。
							<br />相应奖项在兑换后，如因存在质量或使用问题，请及时与圣牧有机小程序(店铺名称为:圣牧有机)在线客服联系处理(周一至周五9点-17点，法定节假日除外)。
							
							<br />六、活动声明
							<br />1、在参与活动中如用户出现违规行为(如通过非正当途径获得、虚假交易、将兑奖信息分享给他人同时兑奖等)，主办方有权取消获奖资格，并收回全部活动权益(含已使用的和未使用的)。
							<br />2、因登记信息不正确、不真实、未在规定时间内提交等获奖者个人因素而导致奖品不能领取的，相关责任由该获奖者承担。
							<br />3、中奖者领奖过程中所发生的个人费用(包括但不限于上网费、短信费等)需自理，主办方不做任何形式的补偿。
							<br />4、主办方及生产商、本活动的代理商、广告公司、印刷公司和相关合作企业之员工，不可参加此次活动，以示公允。
							注:您点击进入兑换流程则视为您已充分阅读并理解此次活动规则及内容，并同意按照此规则及内容参与此活动。
							
							<!-- 
							1、活动主办方:内蒙古蒙牛圣牧高科乳品有限公司。
							<br />2、活动时间:2024年12月1日0时整至2024年6月1日24时。
							<br />3、活动区域:中国大陆境内(不含香港、澳门及台湾地区)
							<br />4、具体活动事项:此次活动为圣牧“CNY金牌品质金牌有机”主题。凡通过正常购买途径获得外箱印有“箱内有奖卡，扫码赢黄金”标识的圣牧牛奶产品，箱内均有箱卡，通过刮卡扫码即可有机会抽取以下奖品之一，本活动综合中奖率为100%，所述中奖率均以四舍五入计算。
							<br />5、活动参与条件:
							<br />(1)每提牛奶产品中最多可能含有1张箱卡，每张箱卡只有1次抽奖机会，重复抽奖无效。
							<br />(2)每个微信账户(每个账户视为一个单独主体)每日最多可参与6次抽奖，如超过限制则无法继续抽奖。
							<br />6、活动参与方式:
							<br />(1)在活动期间购买圣牧有机牛奶产品，打开牛奶箱后如果得到“金牌品质，金牌有机”奖卡，该奖卡可用于抽奖。
							<br />(2)得到奖卡后，刮开奖卡背面涂层并使用微信手机客户端扫码参与抽奖。
							<br />(3)阅读并同意活动规则后，即可得知获得奖品名称并按提示操作兑奖。 -->


						</view>

					</scroll-view>
				</view>
			</u-popup>

		</view>


	</view>
</template>

<script>
	import onepage from './one.vue';
	import twopage from './two.vue';
	import threepage from './three.vue';
	import 'animate.css';
	export default {
		components: {
			onepage,
			twopage,
			threepage
		},
		data() {
			return {
				code: "",
				erCode: '',
				id: '',
				list: [

					'恭喜132*****8888 抽中 价值1888元足金',
					'恭喜176*****1195 抽中 价值1888元足金',
					'恭喜150*****6978 抽中 价值19.9元有机小米',
					'恭喜131*****7239 抽中 150元圣牧商城惊喜礼券',
					'恭喜139*****0559 抽中 价值19.9元有机小米'

				],
				link:'',
				prizeLevel: 0,
				copyCode: "",
				showCow: false,
				rules: false,
				checked: true,
				pageOne: false,
				kai: false,
				pageTwo: false,
				type: 1,
				curCode: '',
				info: null,
				handleBtn1:false
			}
		},
		methods: {
			record() {
				uni.navigateTo({
					url: "/pages/sys/msg/record"
				})
			},

			handleCC() {
				// 点击冲刺
				
				// this.showCow = !this.showCow
				// this.pageOne = false
										
				// setTimeout(() => {
				// 	this.pageTwo = true
				// 	this.showCow = !this.showCow
				// }, 3000)
				
				// this.prizeLevel =3
				// this.copyCode = 333333
				
				
				
				
				
				if(this.handleBtn1){
					
					this.pageTwo = false
					this.pageOne = true
					
					// this.$u.toast('此二维码已经被扫过啦~');
					return
				}

				this.$u.api
					.prizeDraw({
						erCode: this.erCode,
						openid: this.vuex_token1,
						// erCode:'xj3fNncg4ue7f34a71',
						// openid: 'oykLd6IDBrTf8Mgva-7TIQ8QfwcA'
					})
					.then((res) => {
						if (res.code == 500) {
							this.$u.toast(res.msg);
						} else {
							this.showCow = !this.showCow
							this.pageOne = false
						
							setTimeout(() => {
								this.pageTwo = true
								this.showCow = !this.showCow
							}, 3000)
							
							this.prizeLevel = res?.prize?.prizeLevel
							this.copyCode = res?.prize?.prizeCode
							this.link = res?.link
							this.id = res?.prize?.id
						}
					});


			},
			jump(url) {
				window.location.href = url

			},
			open() {

				if (!this.checked) {
					this.$u.toast('请先阅读并同意圣牧有机品牌中秋抽奖活动规则！');

					return
				}



			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: "none"
						})
					}
				});
			},
			getCode() {
				
				
				let urlParams = new URLSearchParams(window.location.search)
				            // let u = urlParams.get('u')
				            // let p = urlParams.get('p')
							
							// alert(urlParams)
							
				this.code = urlParams.get('code'); // 截取code
				this.erCode = urlParams.get('er');
				// alert(this.erCode)
				// 如果没有code，则去请求
				if (this.code == null || this.code === "" || this.code == undefined) {
					var wxUrl =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f122e8f84c81159&redirect_uri=http://smyj-lj1.gzmxiong.cn?er=${this.erCode}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
					// alert(wxUrl)
					window.location.href = wxUrl;
				} else {
					
					if(this.vuex_token1){
						this.$u.api
							.queryErCode({
								erCode: this.erCode,
								openid:this.vuex_token1
							})
							.then((res2) => {
								
								if(res2.msg.includes('已失效')){
									this.handleBtn1 = true
									this.pageTwo = false
									this.pageOne = true
									
								}else{
									this.handleBtn1 = false
								}
							});
					}else{
						
						this.$u.api
							.getopenid({
								code: this.code
							})
							.then((res1) => {
								// alert(res1.openid)
								this.$u.vuex("vuex_token1", res1.openid);
								this.$u.api
									.queryErCode({
										
										erCode: this.erCode,
										openid:res1.openid
										// erCode: 'D5B6524Z0ES6',
										// openid:'oykLd6lDBrTf8Mgva-7TlQ8QfwcA'
									})
									.then((res2) => {
										console.log(res2.code,34455);
										if(res2.msg.includes('已失效')){
											this.handleBtn1 = true
											this.pageTwo = false
											this.pageOne = true
											
										}else{
											this.handleBtn1 = false
										}
									});
							});
						
					}
					
				}
			},
			
		},
		
		onShow() {
			
			
			
			this.getCode();
			
			// this.$u.api
			// 	.queryErCode({
					
			// 		// erCode: this.erCode,
			// 		// openid:res1.openid
			// 		erCode: 'D5B6524Z0ES6',
			// 		openid:'oykLd6lDBrTf8Mgva-7TlQ8QfwcA'
			// 	})
			// 	.then((res2) => {
			// 		console.log(res2.code,34455);
			// 		if(res2.msg.includes('已失效')){
			// 			this.handleBtn1 = true
			// 			this.pageTwo = false
			// 			this.pageOne = true
						
			// 		}else{
			// 			this.handleBtn1 = false
			// 		}
			// 	});
			

		},
	}
</script>
<style>
	/* page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: 100% 100%;
	} */
	.pagetwo {
		position: relative;
		width: 100%;
		
		z-index: 888;
		/* max-width: 375PX !important; */
		
	}
	.jiantou{
		width: 130rpx !important;
		display: block;
		height: auto;
		margin: 0 70rpx 0 auto !important;
	}

	.cow {

		width: 121rpx;
		height: 156rpx;
		background: url('../static/you-magic/images/q2.png') no-repeat;
		/* 小牛图片 */
		background-size: cover;
		border-radius: 50%;
		position: absolute;
		left: 12rpx;
		top: 594rpx;
		animation: moveDownAndGrow 0.6s cubic-bezier(0.42, 0, 0.58, 1) forwards;

		/* animation: breathing 1s ease-in-out infinite; */
	}


	@keyframes moveDownAndGrow {
		0% {
			transform: translate(0, 0) scale(1);
		}

		30% {
			transform: translate(50px, 100px) scale(1.1);
			/* 弯曲效果，开始向右下移动 */
		}

		50% {
			transform: translate(60px, 110px) scale(1.2);
			/* 最大的弯曲和变大 */
		}

		70% {
			transform: translate(70px, 120px) scale(1.3);
			/* 继续移动 */
		}

		100% {
			transform: translate(115px, 125px) scale(1.5);
			/* 最终位置和最大大小 */
		}
	}

	@keyframes moveDownAndGrow {
		0% {
			/* transform: translate(0, 0) scale(1); */

			transform: scale(1);
			left: 0;
			top: 594rpx;

		}

		/* 30% {
	         transform: translate(50px, 100px) scale(1.1); 
	       }
	       50% {
	         transform: translate(60px, 110px) scale(1.2); 
	       }
	       70% {
	         transform: translate(70px, 120px) scale(1.3); 
	       } */
		100% {
			transform: scale(1.5);
			left: 145px;
			top: 960rpx;
			/* transform: translate(145px, 195px) scale(1.5); */
		}
	}


	@media screen and (min-width:100px) and (max-width:376px) {
		@keyframes moveDownAndGrow {
			0% {

				transform: scale(1);
				left: 0;
				top: 594rpx;
			}

			100% {
				transform: scale(1.5);
				left: 145px;
				top: 900rpx;
			}
		}
	}

	/* @media screen and (min-width:376px) and (max-width:413px) {
	   @keyframes moveDownAndGrow {
	   	0% {
	   	
	   		transform: scale(1);
	   		left: 0;
	   		top: 594rpx;
	   	}
	   	100% {
	   		transform:  scale(1.5);
	   		left: 145px;
	   		top: 870rpx;
	   	}
	   }
	} */



	.bull {
		width: 121rpx;
		height: 156rpx;
		background: url('../static/you-magic/images/q2.png') no-repeat;
		/* 小牛图片 */
		background-size: cover;
		animation: slideDownAndGrow 2s forwards;
		animation-iteration-count: 1;
		left: 12rpx;
		top: 594rpx;
		position: absolute;
	}

	@keyframes slideDownAndGrow {
		0% {
			transform: translateY(0px);
			/* 下降20像素 */
			/*  width: 121rpx;
	   height: 156rpx; */
		}

		100% {
			transform: translateY(50px) scale(1.5, 1.5);
			/* 变大20% */
			/*  width: 121rpx;
	   height: 156rpx; */
		}
	}

	@keyframes breathe {
		0% {
			opacity: 0.5;
			transform: scale(1);
		}

		50% {
			opacity: 1;
			transform: scale(1.2);
		}

		100% {
			opacity: 0.5;
			transform: scale(1);
		}
	}



	.Mybgs {
		/* width: 100%; */
		/* height: 100vh; */
		/* background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: cover; */
		width: 100%;
		height: 100vh;
		/* height: 100vh; */
		display: block;

	}

	/* 	page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: 100% 100%;
	} */
</style>
<style lang="scss">
	
	

	
	@-webkit-keyframes zy {
		10% {
			transform: rotateY(10deg);
		}
	
		20% {
			transform: rotateY(-100deg);
		}
	
		30% {
			transform: rotateY(50deg);
		}
	
		40% {
			transform: rotateY(-5deg);
		}
	
		50%,
		100% {
			transform: rotateY(0deg);
		}
	}
	
	// @-webkit-keyframes zy {
	// 	10% {
	// 		transform: rotateY(15deg);
	// 	}
	
	// 	20% {
	// 		transform: rotateY(-100deg);
	// 	}
	
	// 	30% {
	// 		transform: rotateY(-50deg);
	// 	}
	
	// 	40% {
	// 		transform: rotateY(-20deg);
	// 	}
	
	// 	50% {
	// 		transform: rotateY(5deg);
	// 	}
	// 	100% {
	// 		transform: rotateY(0deg);
	// 	}
	// }
	// animation: zy 2.5s .15s linear infinite;
	.zujin{
		display: block;
		width: 292rpx;
		height: 43rpx;
		margin: 0 auto;
	}
	.mypageone {
		position: relative;

		.close1 {
			display: block;

			width: 56rpx;
			height: 56rpx;

			margin: 20rpx 0 20rpx auto;
		}

		.beisao {
			width: 622rpx;
			height: 546rpx;
		}
	}


	.logos {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		width: 100%;

		img {
			width: 100%;
			display: block;
			margin: 0 auto;
		}
	}

	.pagetwo {
		position: relative;
	}

	.contents {
		position: absolute;
		top: 187rpx;
		left: 72rpx;
		z-index: 88;
		right: 54rpx;
		bottom: 0;

		.tit {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 29rpx;
			color: #FEEFD2;
			// line-height: 38rpx;
			margin-top: 10rpx;
			text-align: center;
		}

		.kefu {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #FEF8C4;
			line-height: 33rpx;
			text-align: center;
			position: absolute;
			bottom: 48rpx;
			width: 100%;
		}

		.jpmc {
			position: relative;
			z-index: 3;
			margin: 43rpx 0 35rpx;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 42rpx;
			color: #3D211F;
			line-height: 61rpx;
			text-align: center;

			.txt1 {
				font-size: 30rpx;
			}

			.red {
				color: #CC1D00;
			}
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}


		.guanghuan {
			position: relative;
			width: 483rpx;
			height: 459rpx;
			margin: 0 auto;
			margin-top: -60px;

			.bg {
				animation: rotate 3s linear infinite;
				position: relative;

				z-index: 1;
				width: 100%;
				height: 100%;
			}

			.main {


				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 5;

				>.pic {
					display: block;
					margin: 100rpx auto 30rpx;
					width: 293rpx;
					height: 285rpx;
				}
			}

			.btns3 {
				width: 275rpx;
				height: 63rpx;
				margin: 0 auto;
				display: block;
				animation: breathing 0.5s ease-in-out infinite;

			}

		}
	}

	/deep/ .u-checkbox__icon-wrap {
		border: 1rpx solid #fff !important;
	}

	.read {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		right: 0;

		text {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.swiper {
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 455rpx;
		// top: 480rpx;

		/deep/ .u-swiper-item {
			justify-content: center !important;
		}

		.sweiperitem {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 24rpx;
			transform: scale(0.7);
			color: #FAEBCC;
			text-align: center;
		}

		.line {
			// position: absolute;
			width: 502rpx;
			height: 25rpx;
			margin: 0 0 0 150rpx;
			// left: 128rpx;
			// top: 491rpx;
		}
	}


	.run {

		.niu {

			position: absolute;
			left: 12rpx;
			top: 594rpx;
			width: 121rpx;
			height: 156rpx;
			z-index: 5;


		}

		.handle {
			left: 50%;
			bottom: 190rpx;
			position: absolute;
			width: 350rpx;
			height: 373rpx;
			margin-left: -175rpx;
			animation: breathing 1s ease-in-out infinite;
			
			border-radius: 50%;
			// box-shadow: 0 0 0 0 rgba(249, 237, 163, 1.0);

			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.addHandle{
			
			left: 50%;
			bottom: 190rpx;
			position: absolute;
			width: 350rpx;
			height: 373rpx;
			margin-left: -175rpx;
			 animation-delay: 0s; /* 第一次动画不延迟 */
			// animation: zy 1.5s 2s linear infinite;
			
			
			 animation-name: zy;
			  animation-duration: 2s;
			  animation-delay: 0s; /* 第一次动画不延迟 */
			  
			  // animation-iteration-count: 3; /* 动画重复3次 */
			
			border-radius: 50%;
			// box-shadow: 0 0 0 0 rgba(249, 237, 163, 1.0);
			
			image {
				width: 100%;
				height: 100%;
			}
			
		}
	}

	.hand {
		width: 20px;
		display: block;
		height: auto;
		margin-left: 10px;
	}

	.step {
		border-radius: 50%;
		width: 24rpx;
		height: 24rpx;
		background: #FDE396;
		font-family: FZLTZCHK--GBK1, FZLTZCHK--GBK1;
		font-weight: normal;
		font-size: 16rpx;
		color: #C9332C;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step1 {
		position: absolute;
		right: -20px;
		top: -10px;
	}

	.add /deep/ .u-mode-center-box {
		background: url('../static/you-magic/images/tankuangbg1.png') no-repeat;
		background-size: cover;
		width: 704rpx;
		height: 1028rpx !important;
	}

	.add1 /deep/ .u-mode-center-box {
		background: none;
		height: 100rpx;
	}

	.rulesMask {
		// margin: 0 30rpx;
		width: 580rpx;
		// background: red;
		margin: 0 auto;

		.words {
			padding-left: 10px;
			line-height: 25px;
			font-size: 26rpx;
		}
	}

	.tits {
		padding: 206rpx 0 10px;
		text-align: center;
		font-size: 17px;
	}

	.bgs {
		position: relative;

		.dhm {
			position: absolute;
			bottom: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
			font-weight: normal;
			font-size: 24rpx;
			color: #FDDF8C;
			// line-height: 27rpx;
			// margin: 20px 0;
		}




		.ydj {

			img {
				display: block;
				width: 100%;
				height: auto;
				margin: 50px auto;
			}
		}

		.edj {
			img {
				display: block;
				width: 100%;
				height: auto;
				margin: 10px auto;
			}

			.pic {
				width: 156rpx !important;
				height: 290rpx !important;
			}

			.addkefu {
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin: 95rpx auto 29rpx;
			}

			.macode {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 174rpx;
					height: 40rpx;
					background: linear-gradient(-68deg, #FBE1B1, #F2C96A, #E7CA8F, #FFF1D4, #F5D486, #FFEFCE);
					border-radius: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 27rpx;
					color: #D2381C;
					margin-left: 15rpx;
				}
			}

			.tips {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 23rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin-top: 24rpx;
				text-align: center;
			}

			.ewmCont {
				width: 201rpx;
				height: 201rpx;
				background: #FCE295;
				border-radius: 10rpx;
				margin: 21rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 183rpx;
					height: 183rpx;
					border-radius: 10rpx;
				}
			}
		}

		.sdj {
			.pic {

				width: 296rpx !important;
				height: 290rpx !important;
				animation: breathing 0.5s ease-in-out infinite;
			}

			.btns3 {
				animation: breathing 0s ease-in-out infinite !important;
			}
		}



		.close {
			position: absolute;
			width: 46rpx;
			height: 46rpx;
			right: 77rpx;
			top: 30rpx;
			z-index: 8;
		}




	}


	/deep/ .u-checkbox__label {
		margin-right: 0;
		margin-left: 13rpx;
		font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
		font-weight: normal;
		font-size: 20rpx;
		color: #FEDB84;
		line-height: 52rpx;
		text-align: center;
		font-style: normal;
	}







	@keyframes breathing {
		0% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}

		50% {
			// box-shadow: 0 0 10px 10px rgba(248, 244, 122, 0);
			transform: scale(1.1);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}
	}

	.handleBox {
		position: absolute;
		right: 0;
		top: 77rpx;
		z-index: 8;

		.sameBox {
			text-align: center;
			margin-bottom: 10rpx;
			width: 43rpx;
			height: 131rpx;
			background: rgba(26, 172, 143, 0.47);
			border-radius: 18rpx 0 0 18rpx;
			border: 2rpx solid #1AAC8F;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 23rpx;
			color: #24D8B5;
		}
	}
</style>
